<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <el-button class="button" color="#1baeae" @click="submit">+ 增加</el-button>
        <el-button class="button" color="#f56c6c" :icon="Delete">批量删除</el-button>
      </div>
    </template>
    <el-table v-loading="state.loading" ref="multipleTableRef" :data="state.tableData" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column property="categoryName" label="分类名称" />
      <el-table-column property="categoryRank" label="排序值" />
      <el-table-column label="排序时间">
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-link type="success" @click="update(row)" :underline="false">修改&nbsp;&nbsp;</el-link>
          <el-link type="primary" @click="subordinate(row)" :underline="false">&nbsp;下级分类&nbsp;</el-link>
          <el-popconfirm title="确定要删除本条数据吗？" @confirm="remove([row.id])">
            <template #reference>
              <el-link type="primary" :underline="false">&nbsp;&nbsp;删除</el-link>
            </template>

          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="state.total" :page-size="state.pageSize"
      @prev-click="prevClick" @next-click="nextClick" @current-change="currentChange" />
  </el-card>
  <el-dialog v-model="state.dialogFormVisible" :title="state.dialogTitle">
    <el-form :model="state.form" label-width="90px" ref="validateFrom" :rules="rules">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="state.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序值" prop="num">
        <el-input type="number" v-model="state.form.num" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogFormVisible = false;
            initialize();">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    name: 'classifyAdministration',
  }
</script>
<script setup>
  import {
    Delete
  } from '@element-plus/icons-vue'
  import api from '@/http'
  import {
    reactive,
    onBeforeMount,
    ref,
  } from "vue"
  import {
    ElMessage
  } from 'element-plus'
  const state = reactive({
    tableData: [],
    total: 0,
    pageSize: 10,
    currentPage: 1,
    loading: false,
    dialogFormVisible: false,
    form: {
      name: '',
      num: 0,
    },
    categoryLevel: 1,
    id: null,
    dialogTitle: '',
    parentId:0,
  })
  onBeforeMount(() => {
    init();
  })
  // 获取列表数据
  const init = async () => {
    state.loading = true;
    const {
      data,
      resultCode
    } = await api.classify.categories(state.currentPage, state.pageSize, state.categoryLevel, state.parentId);
    if (resultCode === 200) {
      state.tableData = data.list;
      state.total = data.totalCount;
      state.currentPage = data.currPage;
      state.pageSize = data.pageSize;
      state.loading = false;
    } else {
      ElMessage({
        showClose: true,
        message: '数据渲染失败，请稍后再试！！',
        type: 'error',
      })
      state.loading = false;
    }
  }
  // 分页点击上一页
  const prevClick = () => {
    state.currentPage--;
    init();
  }
  // 分页点击下一页
  const nextClick = () => {
    state.currentPage++;
    init();
  }
  // 分页改变
  const currentChange = (val) => {
    state.currentPage = val;
    init();
  }
  const validateFrom = ref(null);
  //校验规则
  const rules = {
    name: [{
      required: true,
      message: "请输入分类名称",
      trigger: "blur"
    }],
    num: [{
        required: true,
        message: "请输入排序值",
        trigger: "blur"
      },
      {
        min: 0,
        max: 201,
        message: '请输入正确的排序值',
        trigger: 'blur'
      },
    ],
  }
  const submit = () => {
    state.dialogFormVisible = true;
    state.dialogTitle = '添加分类';
    state.id = null;
  }
  // 新增
  const onSubmit = () => {
    validateFrom.value.validate(async (valid) => {
      if (valid) {
        if (state.id === null) {
          let {
            resultCode,
            message
          } = await api.classify.categoriesAdd(state.categoryLevel, state.form.name, state.form.num, state.parentId)
          if (resultCode === 200) {
            ElMessage({
              showClose: true,
              message: '添加成功',
              type: 'success',
            })
            initialize();
            state.dialogFormVisible = false;
            init();
          } else {
            ElMessage({
              showClose: true,
              message: message,
              type: 'error',
            })
          }
        }else{
          let {resultCode,message} = await api.classify.categoriesUpdate(state.id, state.categoryLevel, state.form.name, state.form.num, state.parentId);
          if (resultCode === 200) {
            ElMessage({
              showClose: true,
              message: '修改成功',
              type: 'success',
            })
            state.dialogFormVisible = false;
            init();
          } else {
            ElMessage({
              showClose: true,
              message: message,
              type: 'error',
            })
          }
        }
      }
    })
  }
  //表单初始化
  const initialize = () => {
    state.form.name = '';
    state.form.num = 0;
  }
  // 修改
  const update = async (row) => {
    state.id = row.categoryId;
    state.dialogFormVisible = true;
    state.dialogTitle = '修改分类';
    let {
      data,
      resultCode,
      message
    } = await api.classify.categoriesInfo(state.id);
    if (resultCode === 200) {
      state.form.name = data.categoryName;
      state.form.num = data.categoryRank
    } else {
      ElMessage({
        showClose: true,
        message: message,
        type: 'error',
      })
    }
  }
</script>

<style lang="less" scoped>
  .button {
    color: #fff;
  }
</style>